<template>
	<div>
		<el-form ref="ruleFormRef"  :model="props.data" :rules="rules"  label-width="120px" class="demo-ruleForm"
			:size="formSize" status-icon>
			<el-form-item label="标题" prop="title">
				<el-input v-model="props.data.title" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="props.data.status" size="large">
					<el-radio-button label="显示" />
					<el-radio-button label="隐藏" />
				</el-radio-group>
			</el-form-item>
			<el-form-item label="排序" prop="orders">
				<el-input-number v-model="props.data.orders" />
			</el-form-item>
			<el-form-item label="标题" prop="p">
				<el-upload class="avatar-uploader" action="/3003api/uploadFile" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="props.data.pic" :src="props.data.pic" width="100" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref,defineExpose,defineProps } from 'vue'
	import 'element-plus/es/components/form/style/css'
	import 'element-plus/es/components/form-item/style/css'
	import 'element-plus/es/components/input/style/css'
	import 'element-plus/es/components/input-number/style/css'
	import 'element-plus/es/components/icon/style/css'
	import 'element-plus/es/components/upload/style/css'
	import 'element-plus/es/components/message/style/css'
	import 'element-plus/es/components/radio-group/style/css'
	import 'element-plus/es/components/radio-button/style/css'
	import type { FormInstance, FormRules, UploadProps } from 'element-plus'
	import { ElForm, ElFormItem, ElInput, ElInputNumber, ElUpload, ElIcon, ElRadioGroup, ElRadioButton } from 'element-plus'
	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'

	interface RuleForm {
		title : string
		status : string|number,
		pic : string
		orders : string|number

	}
	
	const props = defineProps({
		data:{
			type:Object,
			default:{
				title: '',
				status:'' ,
				pic: '',
				orders: 0
			}
		}
	})

	const formSize = ref('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		title: 'Hello',
		status: 1,
		pic: '',
		orders: 0
	})

	const rules = reactive<FormRules<RuleForm>>({
		title: [
			{ required: true ,message: '请设置标题'},
		],
		status: [
			{
				required: true,
				message: '请设置状态'
			},
		],
		pic: [
			{
				required: true,
				message: '请设置封面'
			},
		],
		orders: [
			{
				required: true,
				message: '请设置排序'
			},
		],
	})

	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log('submit!')
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}



	const imageUrl = ref('')

	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
		console.log(response.data.filename, 114)
		ruleForm.pic = "http://127.0.0.1:3003/" + response.data.filename
		props.data.pic = "http://127.0.0.1:3003/" + response.data.filename

	}

	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
		if (rawFile.type !== 'image/jpeg') {
			ElMessage.error('Avatar picture must be JPG format!')
			return false
		} else if (rawFile.size / 1024 / 1024 > 2) {
			ElMessage.error('Avatar picture size can not exceed 2MB!')
			return false
		}
		return true
	}

	const submit = () => {
		return new Promise(async (resolve,reject) => {
			console.log(props.data,135)
			await ruleFormRef.value.validate((valid, fields) => {
				if (valid) {
					if(props.data.status==='显示'){
						props.data.status=1
					}else{
						props.data.status=2
					}
					console.log(props.data, 137)
					resolve(props.data)
				} else {
					reject("参数不足")
				}
			})
			
		});
	}
	
	defineExpose({
		submit
	})
</script>


<style>
</style>